import React from 'react';
import axios from 'axios';
import './sao.css';
import { Card, Button,notification,Col,Row } from 'antd';
import { Input } from 'antd';
const { TextArea } = Input;
class Sao extends React.Component {
  state = {
    donateList: [],
    value: "",
    values: []
  }
  componentWillMount() {
    axios.get('/getSao')
      .then((response) => {
        this.setState({
          values: response.data
        })
      }).catch((error) => {
        
      });
  }
  loginSuccess = type => {
    notification[type]({
      message: '发送成功！',
    });
  };
  loginError = type => {
    notification[type]({
      message: '请先登录！'
  
    });
  }; 
  onClick = () => {
    console.log(this.state.value);
    axios.get('/setSao?msg='+this.state.value)
      .then((response) => {
        if (response.data.state){
          this.componentWillMount();
          this.loginSuccess('success');
        }else{
          this.loginError('error');
          console.log("wuwuwuwu");
        }
      }).catch((error) => {
        console.log("wuwuwuwu");
      });
      
  }
  render() {
    const onChange = e => {
      this.setState({
        value: e.target.value
      })
    };
    return (
      <div>
        <TextArea showCount maxLength={10000} onChange={onChange} />
        <Button type="primary" onClick={this.onClick}>提交</Button>
        {/* <List
        itemLayout="horizontal"
        dataSource={this.state.donateList}
        renderItem={item => (
          <List.Item>
            <List.Item.Meta
              avatar={<Avatar src="http://mc.hezi.world/temp_.png" />}
              title={<a href="https://mc.hezi.world">{item.name}</a>}
              description={"感谢这位玩家无偿赞助了"+item.money+"元"}
            />
          </List.Item>
        )}
      /> */}
      <div className="site-card-wrapper">
      <Row gutter={16} align='middle'>
          {this.state.values.map((item)=>{return (
              
            <Col span={8} >
            <Card id='cards' title={item.username}  style={{ width: 300 }}>
              <>
              <p id='cardsfont'>{item.msg}</p>
              </>
          </Card>
          <br />
          </Col>
          )})}
          </Row>
          </div>
      </div>
    );
  }
}

export default Sao;